<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-20 09:35:32
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-21 13:48:32
 * @FilePath: /web_music_app_vue3_vite_ts/src/components/Aside/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="aside">

        <div class="aside-item ell" v-for="(item, index) in items" :key="index" @click="asideItemClick(item.key)">
            <img style="width: 16px;height: 16px" :src="selectedItem === item.key ? item.redIcon : (
                globalStore.themeName === 'dark' ? item.darkIcon : item.icon
            )" alt="">
            <div style="padding-left: 10px;" :class="selectedAside === item.key ? 'selected' : ''">{{ item.name }}</div>
        </div>

        <div class="my-music">
            我的音乐
        </div>

        <div class="aside-item ell" v-for="(item, index) in myItems" :key="index" @click="asideItemClick(item.key)">
            <img style="width: 16px;height: 16px" :src="selectedItem === item.key ? item.redIcon : (
                globalStore.themeName === 'dark' ? item.darkIcon : item.icon
            )" alt="">
            <div style="padding-left: 10px;" :class="selectedAside === item.key ? 'selected' : ''">{{ item.name }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
import { ref, onMounted, computed } from "vue";
import useGlobalStore from "../../store/modules/global";
//获取小仓库对象
let globalStore = useGlobalStore();



const items = ref([
    {
        name: '发现音乐',
        icon: './src/assets/svg/find.svg',
        redIcon: './src/assets/svg/find1.svg',
        darkIcon: './src/assets/svg/find2.svg',
        key: '/home'
    },
    {
        name: '播客', icon: './src/assets/svg/bo.svg',
        redIcon: './src/assets/svg/bo1.svg',
        darkIcon: './src/assets/svg/bo2.svg', key: '/boke'
    },
    {
        name: '私人漫游', icon: './src/assets/svg/per.svg',
        redIcon: './src/assets/svg/per1.svg',
        darkIcon: './src/assets/svg/per2.svg', key: '/per'
    },
    {
        name: '视频', icon: './src/assets/svg/tv.svg',
        redIcon: './src/assets/svg/tv1.svg',
        darkIcon: './src/assets/svg/tv2.svg', key: '/tv'
    },
    {
        name: '关注', icon: './src/assets/svg/conn.svg',
        redIcon: './src/assets/svg/conn1.svg',
        darkIcon: './src/assets/svg/conn2.svg', key: '/con'
    },
])

const myItems = ref([
    {
        name: '我喜欢的音乐', icon: './src/assets/svg/love.svg',
        redIcon: './src/assets/svg/love1.svg',
        darkIcon: './src/assets/svg/love2.svg', key: '/love'
    },
    {
        name: 'iTunes音乐', icon: './src/assets/svg/it.svg',
        redIcon: './src/assets/svg/it1.svg',
        darkIcon: './src/assets/svg/it2.svg', key: '/it'
    },
    {
        name: '下载管理', icon: './src/assets/svg/down.svg',
        redIcon: './src/assets/svg/down1.svg',
        darkIcon: './src/assets/svg/down2.svg', key: '/down'
    },
    {
        name: '最近播放', icon: './src/assets/svg/last.svg',
        redIcon: './src/assets/svg/last1.svg',
        darkIcon: './src/assets/svg/last2.svg', key: '/last'
    },
    {
        name: '我的音乐云盘', icon: './src/assets/svg/my_music.svg',
        redIcon: './src/assets/svg/my_music1.svg',
        darkIcon: './src/assets/svg/my_music2.svg', key: '/my_music'
    },
    {
        name: '我的收藏', icon: './src/assets/svg/star.svg',
        redIcon: './src/assets/svg/star1.svg',
        darkIcon: './src/assets/svg/star2.svg', key: '/star'
    },
]);

const selectedItem = computed(() => globalStore.currentPath);
// 

const selectedAside = computed(() => {
    let path = globalStore.currentPath;
    // console.log('path',path)
    switch(globalStore.currentPath){
        case '/songSheet':
        case '/charts':
        case '/singer':
        case '/new':
        path = '/home';
        break;

    }
    return path
});

function asideItemClick(k: string) {
    // selectedItem.value = k;
    if (selectedItem.value === k) {
        return;
    }

    // console.log(router)
    globalStore.updateStateByKeys({
        backLeft: [
            ...globalStore.backLeft,
            selectedItem.value
        ],
        backRight: []
    });
    // 路由跳转
    router.push(`${k}`);

}

</script>

<style scoped lang="less">
.aside {
    width: 100%;
    height: calc(100% - 10px);
    background-color: @asideBgColor;
    overflow-y: auto;
    padding-top: 10px;

    .aside-item {
        display: flex;
        align-items: center;
        padding: 8px 0px 8px 15px;
        margin-right: 8px;
        cursor: pointer;
        border-radius: 4px;
        color: @color;

        &:hover {
            background-color: @asideHoverBg;
        }

        div {
            font-size: 13px;
        }

        .selected {
            color: #d33a31;
        }
    }

    .my-music {
        font-size: 13px;
        padding: 15px;
        color: @myMusicColor;
    }
}
</style>